<template>
	<div class="content">
		<h2><i class="iconfont icon-shangpin1"></i>活动商品</h2>
		<div class="content-wrap">
			<!--根据不同条件进行搜索-->
			<div class="search-list">
				<!--按关键字分类(商品描述，起始日期，价格区间)-->
				<div class="goods-id search-list-item">
					<div class="keyword-tag">关键字</div>
					<el-input placeholder="商品描述" size="small"></el-input>
				</div>
				<div class="goods-num search-list-item">
					<div class="keyword-tag">活动起始日期</div>
					<el-date-picker
							size="small"
						    v-model="goodsTimes"
						    type="daterange"
						    range-separator="至"
						    start-placeholder="开始日期"
						    end-placeholder="结束日期">
				  	</el-date-picker>
				</div>
				<div class="goods-title search-list-item">
					<div class="keyword-tag">商品价格</div>
					<el-input placeholder="价格区间" size="small"></el-input>
				</div>
				
				<!--按商品类型来进行分类-->
				<div class="goods-classify">
					<div class="classify-tag">商品分类</div>
					 <el-cascader
					 	size="small"
					    :options="activeGoodsType"
					    v-model="selectGoodsTypeVal"
					    @active-item-change="fetchGoodsType">
					 </el-cascader>
				</div>
				
				<div class="goods-search-btn">
					<el-button size="small" type="success" icon="el-icon-search">搜索</el-button>
				</div>
			</div>
	
			<!--商品显示详情-->
			<div class="content-table" v-loading="loading" >
				<el-table :data="publishGoods" strip @selection-change="select" height="450">
					<el-table-column type="selection"></el-table-column>
					<el-table-column label="商品编号" prop="id" width="110"></el-table-column>
					<el-table-column label="商品描述" prop="name" width="350">
						<template slot-scope="scope">
							<div class="goods-name">
								<img :src="scope.row.img" alt="" />
								<span class="goods-name-des">{{scope.row.name}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="商品品牌" prop="type"></el-table-column>
					<el-table-column label="价格" prop="fen"></el-table-column>
					<el-table-column label="参与活动" prop="active">
						<template slot-scope="scope">
							<el-tag>每日推荐</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="上架时间" width="200" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.time | formatTime }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="150" align="center">
						<template slot-scope="scope">
							<el-button size="mini" @click="showGoodsDetail">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!--翻页功能-->
		<el-pagination 
			@current-change="handleCurrentChange" 
			background layout="total, prev, pager, next" 
			:total="totalNum" class="fr">
		</el-pagination>
	</div>
</template>

<script>
	const goodsType = [{
			value: 1,
			label: "食品酒水"
		},
		{
			value: 2,
			label: "服饰钱包"
		}
	];
	export default {
		created() {
			this.getData();
		},
		data() {
			return {
				publishGoods: null,			//想要展示的活动商品
				__publishGoods: null,		//展示的活动商品的副本(不会改变)
				totalNum: 0,				//数据总数
				goodsType: [],				//从服务器获取到的商品分类的值
				goodsTimes: [],				//上架日期
				activeGoodsType: goodsType,	//从服务器获取到的商品分类的值
				selectGoodsTypeVal: []		//选中的商品分类的值
			}
		},
		methods: {
			select(row) {
				console.log(row)
			},
			handleCurrentChange() {
				return 1;
			},
			getData() {
				this.loading = true;
				this.$http.post("/api/activeGoods").then((res, err) => {
					this.loading = false;
					this.publishGoods = res.data;
					this.totalNum = res.data.length;
				});
			},
			showGoodsDetail() {
				this.$router.push({
					name: "publish_goods_detail"
				});
			},
			fetchGoodsType() {
				
			}
		}

	}
</script>

<style scoped lang="scss">
	.content {
		position: relative;
		width: 87%;
		>h2 {
			background: #f9f9f9;
			border-bottom: 1px solid #ccc;
			padding: 10px 0;
			font-weight: normal;
			text-indent: 3rem;
			font-size: 1.3rem;
			color: #555;
			i {
				margin-right: 1rem;
			}
		}
	}
	/*内容区域*/
	.content-wrap {
		background: #f2f2f2;
		padding: 2rem;
	}

	/*条件查询*/
	.search-list {
		padding-bottom: 2rem;
		min-height: 90px;
		>div {
			display: inline-block;
		}
		/*批量上架按钮*/
		.goods-del {
			margin-left: 30px;
		}
		/*关键字、商品分类*/
		.keyword-tag,
		.classify-tag {
			font-size: 15px;
			color: #555;
			margin-bottom: 2px;
		}
	}
	/*商品描述*/
	.goods-name {
		>* {
			vertical-align: middle;
		}
		>img {
			width: 80px;
			height: 80px;
		}
		.goods-name-des {
			max-width: 230px;
			display: inline-block;
			text-align: left;
		}
	}
</style>